<template>
    <div style="max-width: 960px;margin: 0 auto;">
    <Header></Header>
        <el-container>
            <el-header>
                <dl>请选择所在地的行政区划</dl>
            </el-header>
            <el-main style="border: 1px solid #eee">
                <div id="back2" class="box" style="height: auto;">
                    <ul class="map">
                        <li>
                            <dl>
                                <dt>华北
                                <dt/>
                                <dd code="110000">
                                    <a class="nav_a" @click="selectDetailByArea('华北')">北京市</a>
                                </dd>
                                <dd code="120000">
                                    <a class="nav_a" @click="selectDetailByArea('华北')">天津市</a>
                                </dd>
                                <dd code="130000">
                                    <a class="nav_a" @click="selectDetailByArea('华北')">河北省</a>
                                </dd>
                                <dd code="140000">
                                    <a class="nav_a" @click="selectDetailByArea('华北')">山西省</a>
                                </dd>
                                <dd code="150000">
                                    <a class="nav_a" @click="selectDetailByArea('华北')">内蒙古自治区</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    东北
                                </dt>
                                <dd code="210000">
                                    <a class="nav_a" @click="selectDetailByArea('东北')">辽宁省</a>
                                </dd>
                                <dd code="220000">
                                    <a class="nav_a" @click="selectDetailByArea('东北')">吉林省</a>
                                </dd>
                                <dd code="230000">
                                    <a class="nav_a" @click="selectDetailByArea('东北')">黑龙江省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    华东
                                </dt>
                                <dd code="310000">
                                    <a class="nav_a" @click="selectDetailByArea('华东')">上海市</a>
                                </dd>
                                <dd code="320000">
                                    <a class="nav_a" @click="selectDetailByArea('华东')">江苏省</a>
                                </dd>
                                <dd code="330000">
                                    <a class="nav_a" @click="selectDetailByArea('华东')">浙江省</a>
                                </dd>
                                <dd code="340000">
                                    <a class="nav_a" @click="selectDetailByArea('华东')">安徽省</a>
                                </dd>
                                <dd code="350000">
                                    <a class="nav_a" @click="selectDetailByArea('华东')">福建省</a>
                                </dd>
                                <dd code="360000">
                                    <a class="nav_a" @click="selectDetailByArea('华东')">江西省</a>
                                </dd>
                                <dd code="370000">
                                    <a class="nav_a" @click="selectDetailByArea('华东')">山东省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    华中
                                </dt>
                                <dd code="410000">
                                    <a class="nav_a" @click="selectDetailByArea('华中')">河南省</a>
                                </dd>
                                <dd code="420000">
                                    <a class="nav_a" @click="selectDetailByArea('华中')">湖北省</a>
                                </dd>
                                <dd code="430000">
                                    <a class="nav_a" @click="selectDetailByArea('华中')">湖南省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    华南
                                </dt>
                                <dd code="440000">
                                    <a class="nav_a" @click="selectDetailByArea('华南')">广东省</a>
                                </dd>
                                <dd code="450000">
                                    <a class="nav_a"
                                       @click="selectDetailByArea('华南')">广西壮族自治区</a>
                                </dd>
                                <dd code="460000">
                                    <a class="nav_a" @click="selectDetailByArea('华南')">海南省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>西南</dt>
                                <dd code="500000">
                                    <a class="nav_a" @click="selectDetailByArea('西南')">重庆市</a>
                                </dd>
                                <dd code="510000">
                                    <a class="nav_a" @click="selectDetailByArea('西南')">四川省</a>
                                </dd>
                                <dd code="520000">
                                    <a class="nav_a" @click="selectDetailByArea('西南')">贵州省</a>
                                </dd>
                                <dd code="530000">
                                    <a class="nav_a" @click="selectDetailByArea('西南')">云南省</a>
                                </dd>
                                <dd code="540000">
                                    <a class="nav_a" @click="selectDetailByArea('西南')">西藏自治区</a>
                                </dd>
                            </dl>
                        </li>
                        <li style="width: 100%; margin-bottom: 20px;">
                            <dl>
                                <dt>西北</dt>
                                <dd code="610000">
                                    <a class="nav_a" @click="selectDetailByArea('西北')">陕西省</a>
                                </dd>
                                <dd code="620000">
                                    <a class="nav_a" @click="selectDetailByArea('西北')">甘肃省</a>
                                </dd>
                                <dd code="630000">
                                    <a class="nav_a" @click="selectDetailByArea('西北')">青海省</a>
                                </dd>
                                <dd code="640000">
                                    <a class="nav_a"
                                       @click="selectDetailByArea('西北')">宁夏回族自治区</a>
                                </dd>
                                <dd code="650000">
                                    <a class="nav_a"
                                       @click="selectDetailByArea('西北')">新疆维吾尔自治区</a>
                                </dd>
                                <dd code="650000">
                                    <a class="nav_a"
                                       @click="selectDetailByArea('西北')">新疆生产建设兵团</a>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </el-main>
        </el-container>

        <!--<div id="components-demo">-->
        <!--<button-counter></button-counter>-->
        <!--</div>-->
    </div>

</template>

<script>
    import Header from "../../../components/Header";

    export default {
        components: {Header},
        name: "Area",
        methods: {
            selectDetailByArea(area){
                window.localStorage.AREA = area;
                console.log("所属地区===>",window.localStorage.AREA);
                this.$router.push({name:"UserLogin"});

            },
            onSubmit(formName) {
                // 为表单绑定验证功能
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
                        this.$router.push("/main/"+this.form.username);
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            }
        }
    }

    // Vue.component('button-counter', {
    //     data: function () {
    //         return {
    //             count: 0
    //         }
    //     },
    //     template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    // })
</script>

<style scoped>

    .el-main {
        background-color: #f8f8f8;
        opacity: 0.8;
        margin-bottom: 15px;
        font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: normal;
        line-height: 30px;
    }

    .map {
        list-style: none;
        height: 130px;
        padding: 10px 0 10px 36px;
        display: block;
    }

    .map li {
        display: block;
        width: 50%;
        float: left;
    }

    .map dt {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
    }

    .map dd {
        margin-inline-start: 10px;
        display: inline-block;
        cursor: pointer;
    }

    a {
        text-decoration: none;
        font-size: 14px;
        display: block;
        width: auto;
        color: #999;
    }


</style>